import { Table } from 'antd'
import React from 'react'
import type { ColumnsType } from 'antd/es/table';

interface ITodo{
    id:number,
    title:string,
    isDone:boolean
}
type ITodos = ITodo[]

export default function TestTable() {

    // 渲染的列表数据
    const dataSource:ITodos = [
        {
            id:1,
            title:'吃饭',
            isDone:true
        },
        {
            id:2,
            title:'睡觉',
            isDone:false
        }
    ]
    // 表格列名及该列渲染数据
    const columns:ColumnsType<ITodo> = [
        {
            title:'id',
            dataIndex:'id'
        },
        {
            title:'待办事项',
            dataIndex:'title'
        },
        {
            title:'完成情况',
            /**
             *  value: (1) 如果有dataIndex配置项，那么value就是dataIndex配置要显示的值
             *         (2) 如果没有dataIndex配置，那么value就是当前行对象
             *  rows： 当前行对象
             *  index：索引
             * 
             */
            dataIndex:'isDone',
            // 自定义要渲染的内容
            render(value:boolean,rows:ITodo, index:number){
                console.log('value: ', value)
                console.log('rows: ', rows)
                console.log('index: ', index)
                return value ? '完成' : '未完成'
            }
        }
    ]
    return (
        <div>
            <h3>Table</h3>
            <Table
                // 设定key值
                rowKey='id'
                // 列信息 列名，每列显示什么
                columns={columns}
                // 列表遍历的数据源
                dataSource={dataSource}
                // 分页器
                pagination={{
                    // 当前页
                    current:2,
                    // 每页显示几条
                    pageSize:2,
                    // 总数据条数
                    total:30,
                    // 快速跳转
                    showQuickJumper:true,
                    // 每页显示几条选择器，是否显示
                    showSizeChanger:true,
                    // 每页显示几条选择器
                    pageSizeOptions:[5,10,15],
                    // 页面变化，和每页条数变化时触发
                    onChange:(page:number,pageSize:number)=>{
                        console.log('page:' ,page)
                        console.log('pageSize:',pageSize)
                    }

                }}
            />
        </div>
    )
}
